<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 3 | User Profile</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Theme style -->
    <link rel="stylesheet" href="./css/adminlte.min.css">
    <link rel="stylesheet" href="./css/content.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="./plugins/fontawesome-free/css/all.min.css">
</head>
<script src="./plugins/jquery/jquery.min.js"></script>
<script>
    $(function () {
        //加载主页面文章
        $.ajax({
            type: 'GET',
            contentType: "application/json",
            url: '/article/findAllArticle', // 替换为你的服务器端点
            data: "1",
            dataType: 'json',
            global: false,
            success: function (response) {
                // 处理成功的响应
                if (response != null) {
                    let data = response.data;
                    console.log(data)
                    $('#totalBlog').text(response.data.length);//设置条数
                    let html = [];
                    for (let i = 0; i < data.length; i++) {
                        var id= data[i].id;
                        html.push( '<div class="mb-1">\n' +
                            '                                    <a href="detail.html?id='+id+'" target="_blank" class="text-lg text-bold link-title">'+data[i].articleTitle+'</a>\n' +
                            '                                    <span class="badge badge-info">原创</span>\n' +
                            '                                </div>');

                        html.push('<p class="content1">'+data[i].articleContent+'</p>');
                        html.push('<span class="text-sm mr-2"><i class="far fa-calendar-alt mr-1"></i> '+data[i].createTime.replace("T"," ")+'</span><span class="text-sm"><i class="far fa-eye mr-1"></i> 10</span>');
                        html.push('<button class="btn btn-outline-success btn-xs">分类</button><button class="btn btn-outline-primary btn-xs">复盘</button><button class="btn btn-outline-primary btn-xs">心态</button>');
                    }
                    $("#blogDetail").append(html.join(""))
                }
            },
            error: function (xhr, status, error) {
                // 处理错误
                console.error(error);
            }
        });
        //加载推荐文章
        $.ajax({
            type: 'GET',
            contentType: "application/json",
            url: '/article/findRecommendArticle', // 替换为你的服务器端点
            data: "1",
            dataType: 'json',
            global: false,
            success: function (response) {
                // 处理成功的响应
                if (response != null) {
                    let data = response.data;
                    console.log(data)
                    let html = [];
                    html.push(' <strong><i class="far fa-bookmark mr-2"></i>推荐文章</strong>');
                    for (let i = 0; i < data.length; i++) {
                        html.push('<a href="" class="d-block link-title text-truncate">'+data[i].articleTitle+'</a>');
                    }
                    $("#recommendArticle").append(html.join(""))
                }
            },
            error: function (xhr, status, error) {
                // 处理错误
                console.error(error);
            }
        });
    })


</script>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fa fa-bars"></i></a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="login.html" class="nav-link">登录页</a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="dashboard.html" class="nav-link">后台主页</a>
            </li>
        </ul>

        <!-- SEARCH FORM -->
        <form class="form-inline ml-3">
            <div class="input-group input-group-sm">
                <input class="form-control form-control-navbar" type="search" placeholder="博客搜索..." aria-label="Search">
                <div class="input-group-append">
                    <button class="btn btn-navbar" type="submit">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>
        </form>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <h1>
            <a href="index.html" class="brand-link">
                <img src="./upload/avatar.jpg" class="brand-image img-circle elevation-3">
                <span class="brand-text font-weight-light">俊俊博客</span>
            </a>
        </h1>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->
                    <li class="nav-header">读万卷书</li>
                    <li class="nav-item">
                        <a href="index.html" class="nav-link active">
                            <i class="fa fa-home nav-icon"></i>
                            <p>首页</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="category.html" class="nav-link">
                            <i class="fa fa-bookmark nav-icon"></i>
                            <p>分类</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="tag.html" class="nav-link">
                            <i class="fa fa-tags nav-icon"></i>
                            <p>标签</p>
                        </a>
                    </li>

                    <li class="nav-header">行万里路</li>
                    <li class="nav-item">
                        <a href="archive.html" class="nav-link">
                            <i class="fa fa-archive nav-icon"></i>
                            <p>归档</p>
                        </a>
                    </li>
                    <li class="nav-header">点滴记录</li>
                    <li class="nav-item">
                        <a href="guestbook.html" class="nav-link">
                            <i class="fa fa-comments nav-icon"></i>
                            <p>留言</p>
                        </a>
                    </li>
                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper mt-3">
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-8">
                        <div class="card card-teal card-outline mb-5">
                            <div class="card-header">
                                <h3 class="card-title float-right">
                                    共 <span class="text-teal text-xl" id="totalBlog"></span> 篇博客
                                </h3>
                            </div><!-- /.card-header -->
                            <div class="card-body bg-hover-gray" id="blogDetail">
<!--                                <div class="mb-1">-->
<!--                                    <a href="detail.html" target="_blank" class="text-lg text-bold link-title">我是一只猫，快乐的星猫，一起喵喵喵</a>-->
<!--                                    <span class="badge badge-info">原创</span>-->
<!--                                </div>-->
<!--                                <p>-->
<!--                                    Lorem ipsum represents a long-held tradition for designers,-->
<!--                                    typographers and the like. Some people hate it and argue for-->
<!--                                    its demise, but others ignore the hate as they create awesome-->
<!--                                    tools to help create filler text for everyone from bacon lovers-->
<!--                                    to Charlie Sheen fans.-->
<!--                                </p>-->
<!--                                <p>-->
<!--                                    <span class="text-sm mr-2"><i class="far fa-calendar-alt mr-1"></i> 2019-01-01 10:08</span>-->
<!--                                    <span class="text-sm"><i class="far fa-eye mr-1"></i> 10</span>-->
<!--                                </p>-->
<!--                                <p class="mb-0">-->
<!--                                    <button class="btn btn-outline-success btn-xs">分类</button>-->
<!--                                    <button class="btn btn-outline-primary btn-xs">标签1</button>-->
<!--                                    <button class="btn btn-outline-primary btn-xs">标签2</button>-->
<!--                                </p>-->
                            </div><!-- /.card-body -->
                            <hr class="m-0">


                        </div>
                        <!-- /.nav-tabs-custom -->
                    </div>
                    <!-- /.col -->
                     <div class="col-md-4">

                        <div class="card widget-user sticky-top">

                            <div class="widget-user-header bg-info">
                                <h3 class="widget-user-username">Liam</h3>
                                <h5 class="widget-user-desc">Devoloper &amp; Coder</h5>
                            </div>
                            <div class="widget-user-image">
                                <img class="img-circle elevation-2" src="./upload/avatar.jpg" alt="User Avatar">
                            </div>
                            <div class="card-body pt-5">
                                <p class="text-muted">
                                    控制风险、顺势而为
                                </p>

                                <ul class="list-group list-group-unbordered">
                                    <li class="list-group-item" id="recommendArticle">
<!--                                        <strong><i class="far fa-bookmark mr-2"></i>推荐文章</strong>-->
<!--                                        <a href="" class="d-block link-title text-truncate">Java学习路线Java学习路线Java学习路线Java学习路线</a>-->
<!--                                        <a href="" class="d-block link-title">Java学习路线</a>-->
<!--                                        <a href="" class="d-block link-title">Java学习路线</a>-->
                                    </li>

                                    <li class="list-group-item">
                                        <strong><i class="fa fa-map-marker-alt mr-2"></i>位置</strong>
                                        <div class="text-muted">Malibu, California</div>
                                    </li>

                                    <li class="list-group-item">
                                        <strong><i class="fa fa-pencil-alt mr-2"></i>技能</strong>
                                        <div class="text-muted">
                                            <span class="badge badge-success">UI Design</span>
                                            <span class="badge badge-success">Mybatis</span>
                                            <span class="badge badge-success">Javascript</span>
                                            <span class="badge badge-success">SpringBoot</span>
                                            <span class="badge badge-success">Node.js</span>
                                        </div>
                                    </li>

                                    <li class="list-group-item">
                                        <strong><i class="fa fa-lightbulb mr-2"></i>爱好</strong>
                                        <div class="text-muted">
                                            <span class="badge badge-warning">编程</span>
                                            <span class="badge badge-warning">学习</span>
                                        </div>
                                    </li>

                                    <li class="list-group-item text-center">
                                        <button class="btn btn-success btn-sm rounded-circle" data-toggle="tooltip"
                                                data-placement="top"
                                                title="939234206">
                                            <i class="fab fa-qq"></i>
                                        </button>
                                        <button class="btn btn-success btn-sm rounded-circle" data-toggle="tooltip"
                                                data-placement="top"
                                                title="939234206">
                                            <i class="fab fa-weixin"></i>
                                        </button>
                                        <a href="http://www.baidu.com" target="_blank"
                                           class="btn btn-success btn-sm rounded-circle" data-toggle="tooltip"
                                           data-placement="top"
                                           title="github">
                                            <i class="fab fa-github text-white"></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- /.col -->
                <!-- /.row -->
            </div><!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <footer class="main-footer">
        <p class="text-center mb-1">
            Copyright © 2024 LeeJW Designed by LeeJW Powered by AdminLTE
        </p>
        <p class="text-center">
            <a href="">粤ICP备20040058号</a>
        </p>
    </footer>
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="./plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="./plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="./js/adminlte.min.js"></script>
<script src="./js/tooltip.init.js"></script>


</body>
</html>
